<template>
    <uni-row>
        <uni-col :span="24">
            <view class="container container-avatar">
                <view v-show="token">
                    <uni-col :span="8">
                        <view class="avatar-box">
                            <view class="avatar">
                                <img :src="userInfo.avatarUrl">
                            </view>
                        </view>
                    </uni-col>
                    <uni-col :span="16">
                        <uni-col :span="14">
                            <view class="userInfo">
                                <p>{{ userInfo.nickName }}</p>
                                <p>
                                    <uni-tag :inverted="true" :text="'至尊ID：' + userInfo.id"/>
                                </p>
                            </view>
                        </uni-col>
                        <uni-col :span="10">
                            <view class="set-up-icon" @click="goUpdateUserInfoPage()">
                                <img src="../../static/icon/setUp.png">
                            </view>
                        </uni-col>
                    </uni-col>
                </view>
                <view v-show="!token">
                    <uni-col :span="24">
                        <view class="login-btn">
                            <button @click="login()">立即登录</button>
                        </view>
                    </uni-col>
                </view>
            </view>
        </uni-col>
        <uni-col :span="24">
            <view class="container">
                <uni-col :span="6">
                    <view class="order-box">
                        <view class="div">
                            <img src="../../static/icon/待付款.png">
                            <p>待付款</p>
                        </view>
                    </view>
                </uni-col>
                <uni-col :span="6">
                    <view class="order-box">
                        <view class="div">
                            <img src="../../static/icon/待发货.png">
                            <p>待发货</p>
                        </view>
                    </view>
                </uni-col>
                <uni-col :span="6">
                    <view class="order-box">
                        <view class="div">
                            <img src="../../static/icon/运输中.png">
                            <p>运输中</p>
                        </view>
                    </view>
                </uni-col>
                <uni-col :span="6">
                    <view class="order-box">
                        <view class="div" style="border: hidden">
                            <img src="../../static/icon/全部订单.png">
                            <p>全部</p>
                        </view>
                    </view>
                </uni-col>
            </view>
        </uni-col>
        <uni-col :span="24">
            <view class="container">

            </view>
        </uni-col>
        <uni-col :span="24">
            <view class="container">

            </view>
        </uni-col>
        <uni-col :span="24">
            <view class="container">

            </view>
        </uni-col>
    </uni-row>
</template>

<script>
import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row";
import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col";
import storage from "../../common/storage/storageHelper";
import pageJump from "../../common/Jump/pageJump";
import {showToastHelper} from "../../common/util/commonTools";

export default {
    name: "personalCenter",
    components: {
        UniCol,
        UniRow
    },
    data() {
        return {
            token: false,
            userInfo: {
                id: "",
                nickName: "",
                avatarUrl: "",
                city: "",
                province: ""
            },
        }
    },
    onShow() {
        this.isLogin();
    },
    methods: {
        /**
         * 检查是否登录
         */
        isLogin() {
            let token = storage.get("token");
            if (token === "该键值已过期：token" || token === "键值不存在：token") {
                this.token = false;
            } else {
                this.token = true;
                let userInfo = storage.get("userInfo");
                this.userInfo.id = userInfo.id;
                this.userInfo.nickName = userInfo.nickName;
                this.userInfo.avatarUrl = userInfo.avatarImage;
            }
        },
        /**
         * 登录
         */
        login() {
            let _this = this;
            uni.getUserProfile({
                lang: "zh_CN",
                desc: "登录",
                success(data) {
                    _this.userInfo.nickName = data.userInfo.nickName;
                    _this.userInfo.avatarUrl = data.userInfo.avatarUrl;
                    _this.userInfo.city = data.userInfo.city;
                    _this.userInfo.province = data.userInfo.province;
                    if (_this.userInfo != null) {
                        showToastHelper.showLoading("登录中···");
                        wx.login({
                            async success(data) {
                                await _this.$http.post(
                                    _this.$api.login.url,
                                    {
                                        code: data.code,
                                        nickName: _this.userInfo.nickName,
                                        avatarUrl: _this.userInfo.avatarUrl,
                                    }
                                ).then(
                                    response => {
                                        if (response.code === 200 && response.message === "Token:OK" && response.data.userInfo.status === 0) {
                                            let userInfo = {
                                                id: response.data.userInfo.id,
                                                openId: response.data.userInfo.openId,
                                                nickName: response.data.userInfo.nickName,
                                                avatarImage: response.data.userInfo.avatarImage,
                                                city: response.data.userInfo.city,
                                                province: response.data.userInfo.province,
                                                district: response.data.userInfo.district,
                                                gender: response.data.userInfo.gender,
                                                userPhone: response.data.userInfo.userPhone,
                                                birthday: response.data.userInfo.birthday
                                            };
                                            storage.set("userInfo", JSON.stringify(userInfo), 0);
                                            if (storage.get("token")) {
                                                _this.isLogin();
                                                showToastHelper.closeShowLoading();
                                                showToastHelper.showToast(1, "登录成功");
                                            } else {
                                                showToastHelper.closeShowLoading();
                                                showToastHelper.showToast(3, "登录失败");
                                            }
                                        } else {
                                            showToastHelper.closeShowLoading();
                                            showToastHelper.showToast(4, "该账号禁止登录");
                                        }
                                    }
                                ).catch(
                                    error => {
                                        showToastHelper.closeShowLoading();
                                        console.error("登录接口请求失败：", error);
                                    }
                                );
                            },
                        });
                    }
                },
            });
        },
        /**
         * 跳转编辑资料页面
         */
        goUpdateUserInfoPage() {
            pageJump.navigateTo("/pages/personalCenter/updateUserInfo");
        }
    }
}
</script>

<style scoped lang="less">
.container {
    width: 96%;
    border-radius: 25rpx;
    overflow: hidden;
    background-color: white;
    margin: 0px auto 25rpx;
}

.container-avatar {
    width: 100%;
    height: 200rpx;
    border-radius: 0px;
    background-color: transparent;
    background-image: url("../../static/bg/personalCenter_bg.png");
    background-size: 100%;
    background-repeat: round;
}

.avatar-box {
    height: 190rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.avatar-box > .avatar {
    width: 120rpx;
    height: 120rpx;
    background-color: #efefef;
    border-radius: 100%;
}

.avatar-box > .avatar > img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.userInfo {
    height: 105rpx;
    margin: 45rpx 0px;
}

.userInfo > p:first-child {
    margin-top: 2rpx;
    color: white;
}

.userInfo > p:last-child {
    margin-top: 20rpx;
    color: #dcdcdc;
    font-size: 25rpx
}

.set-up-icon > img {
    width: 55rpx;
    height: 55rpx;
    margin: 75rpx 0px 75rpx 115rpx;
}

.login-btn {
    width: 40%;
    margin: 50rpx auto;
}

.order-box {
    margin: 25rpx 0;
    padding: 10rpx 0;
    text-align: center;
}

.order-box > .div {
    border-right: 1px dashed #c5c5c5;
}

.order-box > .div > img {
    width: 50rpx;
    height: 50rpx;
}
</style>